<template>
  <el-dialog v-model="tableVisible" draggable :title="title" :append-to-body="true" width="60%" @close="dialogClose">
    <el-table :data="matterList" stripe size="small" style="height: 100%" max-height="700px" v-loading="loading">
      <el-table-column label="日期" width="260">
        <template v-slot="{ row }">
          {{ row.actionStartTime }}{{ row.actionStartTime == row.actionEndTime ? '' : ' ~ ' + row.actionEndTime }}
        </template>
      </el-table-column>
      <el-table-column label="事项类型" prop="codeName" width="120"/>
      <el-table-column label="事项主题" prop="title" width="150"/>
      <el-table-column label="执行人" prop="executorNames"/>
      <el-table-column label="事项状态" width="100">
        <template v-slot="{ row }">
          {{ row.state == 0 ? '未开始' : (row.state == 1 ? '进行中' : '已完成') }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="135">
        <template v-slot="{ row }">
          <el-button size="small" type="primary" @click="editMatter(row)">编辑</el-button>
          <el-button size="small" type="danger" @click="delMatter(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page-block">
      <el-pagination v-model:currentPage="matterParams.current" v-model:page-size="matterParams.size" :page-sizes="[10, 20, 30, 40]"
                     :small="true" :disabled="false" :background="false" layout="total, sizes, prev, pager, next, jumper"
                     :total="matterTotal" :hide-on-single-page="true" @size-change="matterSize" @current-change="matterCurrent"/>
    </div>
    <template #footer>
      <el-button size="small" @click="dialogClose">关闭</el-button>
    </template>

    <communication v-model:code="selectedCode" v-model:relate-item="relateItem" v-model:enterprise-users="enterpriseUsers"/>
    <minimalism v-model:code="selectedCode" v-model:relate-item="relateItem" v-model:enterprise-users="enterpriseUsers" v-model:remind-times="remindTimes"/>
    <enquiry-price v-model:code="selectedCode" :supplier-id="supplierId"/>
    <work-contact-letter v-model:code="selectedCode" :supplier-id="supplierId"/>
    <purchase-order v-model:code="selectedCode" :supplier="supplierId"/>
    <quotation-order v-model:code="selectedCode" :supplier-id="supplierId"/>
  </el-dialog>
</template>

<script>
import {computed, reactive, toRefs, ref} from 'vue'
import {Plus, Delete} from '@element-plus/icons-vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import {getInfoMatterPage, deleteMatter } from '/@/api/matter'
import Minimalism from '/@/views/matter/common/Minimalism.vue'
import Communication from '/@/views/matter/common/Communication.vue'
import EnquiryPrice from '/@/views/matter/supplier/EnquiryPrice.vue'
import PurchaseOrder from '/@/views/matter/supplier/PurchaseOrder.vue'
import QuotationOrder from '/@/views/matter/supplier/QuotationOrder.vue'
import WorkContactLetter from '/@/views/matter/supplier/WorkContactLetter.vue'

export default {
  name: "MatterPage",
  components: {
    Minimalism,
    Communication,
    EnquiryPrice,
    PurchaseOrder,
    QuotationOrder,
    WorkContactLetter
  },
  emits: ['update:dialogVisible','supplierId','code','title','enterpriseUsers','remindTimes'],
  props: {
    code: {
      type: String,
      default: ''
    },
    supplierId: {   // 供应商信息id
      type: String,
      default: ''
    },
    dialogVisible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    enterpriseUsers:{
      type: Array,
      default: []
    },
    remindTimes:{
      type: Array,
      default: []
    },
  },
  setup(props, context) {
    const {code,supplierId,dialogVisible,title,enterpriseUsers,remindTimes} = toRefs(props)
    let tableVisible = computed({
      get: () => {
        if(dialogVisible.value){
          state.matterParams.code = code.value

          getMatterPage()
        }
        return dialogVisible.value
      },
      set: val => context.emit('update:dialogVisible', val)
    })

    const state = reactive({
      selectedCode:'',
      loading: false,  // 事项表格加载中标记
      matterParams: {  // 事项列表查询参数
        current: 1,
        size: 10,
        moduleCode: 'Supplier', //仅在采购使用
        dataId: supplierId.value,
        actionTime: null,
        code:code.value,
        title: null
      },
      matterTotal:0,
      matterList:[],


    })

    /**
     * 拉起事项，编辑
     */
    const editMatter = (matter) => {
      state.selectedCode = matter.code
    }
    /**
     * 删除事项
     */
    const delMatter = (matter) => {
      ElMessageBox.confirm(`确定删除“${matter.title}”？`, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        deleteMatter(matter).then(res => {
          if (res.data) {
            ElMessage.success('删除成功！')
            getMatterPage()
          }
        }).catch(e => console.log(e))
      }).catch(() => {});
    }
    // 事项分页数据
    const getMatterPage = () => {
      state.loading = true
      getInfoMatterPage(state.matterParams).then(res => {
        state.matterList = res.data.records
        state.matterTotal = res.data.total
        state.loading = false
      }).catch(e => {
        state.loading = false
        console.log(e)
      })
    }
    //关闭表格
    const dialogClose = () => {
      context.emit('update:dialogVisible', false);
    }
    // 事项每页数量变化
    const matterSize = (size) => {
      state.matterParams.size = size
      matterCurrent(1)
    }
    // 事项页码变化
    const matterCurrent = (current) => {
      state.matterParams.current = current
      getMatterPage()
    }

    return {
      Plus,
      Delete,
      ...toRefs(state),
      tableVisible,
      dialogVisible,
      code,
      title,
      enterpriseUsers,
      remindTimes,
      editMatter,
      delMatter,
      getMatterPage,
      dialogClose,
      matterSize,
      matterCurrent

    }
  },


}
</script>

<style scoped>

</style>
